<template>
  <div>
    <van-row>
      <van-col span="8"
        ><van-icon
          class="van-icon-checked"
          color="darkred"
        />30天无忧退货</van-col
      >

      <van-col span="8"
        ><van-icon
          class="van-icon-checked"
          color="darkred"
        />48小时快速退费</van-col
      >
      <van-col span="8"
        ><van-icon
          class="van-icon-checked"
          color="darkred"
        />满88元免邮费</van-col
      >
    </van-row>
    <!-- 购物车复选框 -->
    <van-checkbox-group v-model="result" >
      <van-checkbox
        :name="item.id"
        v-for="item in cartList"
        :key="item.id"
        @click="cGetGoodils(item)"
          :disabled="isBool"
      >
      <!-- 滑动删除 -->
      <van-swipe-cell>  
        <!-- 复选框内容 -->
        <van-card
          :num="item.number"
          :price="item.market_price + '.00 元'"
          :title="item.goods_name"
          :thumb="item.list_pic_url"
        />
        <!-- 步进器 -->
        <van-stepper
          v-model="item.number"
          v-show="isBool"
          @change="chanNum(item)"
        />

       <template #right>
         <van-button square text="删除" type="danger" class="delete-button" @click="del(item)"/>
       </template>
        </van-swipe-cell>
      </van-checkbox>
    </van-checkbox-group>

    <!-- 提交订单栏 -->
    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checkedall" :disabled="isBool || cartList.length===0">全选</van-checkbox>
      <template #tip>
        累计共{{ cartTotal.checkedGoodsCount }}件商品，可点击
        <van-button
          :type="isBool ? 'danger' : 'primary'"
          size="small"
          @click="isBool = !isBool"
          >{{ isBool ? "完成编辑" : "编辑" }}</van-button
        >
        按钮进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import { GetCartData, GetGoodils, Getbujin,Getdel } from "@/request/api";
import Vue from "vue";
export default {
  data() {
    return {
      result: [],
      cartList: [],
      bool: true,
      cartTotal: [],
      isBool: false,
    };
  },
  methods: {
    // 删除
    del(item){
     Getdel({
  productIds:item.product_id.toString()
    }).then(res=>{
         this.renderData(res);
    })
    },
    chanNum(item) {
      // 步进器的请求
      Getbujin({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id,
      }).then((res) => {
        console.log(res);
        this.renderData(res);
      });
    },
    onSubmit() {},
    cGetGoodils(item) {
      // 如果被禁用就return掉
      if (this.isBool) return;
      // 点击商品发起请求数据
      GetGoodils({
        isChecked: item.checked == 1 ? 0 : 1,
        productIds: item.product_id.toString(),
      }).then((res) => {
        this.renderData(res);
      });
    },
    //封装起来
    renderData(res) {
      this.result = [];
      // let { cartList, cartTotal } =res.data;
      this.cartList = res.data.cartList;
      this.cartTotal = res.data.cartTotal;
      this.cartList.map((item) => {
        item.checked ? this.result.push(item.id) : "";
      });
    },
  },
  computed: {
    checkedall: {
      //全选
      get() {
        return this.result.length == this.cartList.length&&this.cartList.length!==0
      },
      set(val) {
            // 如果被禁用就return掉
          if (this.isBool) return;
         let ids = this.cartList.map((item) => {
          return item.product_id;
         });
        // 点击商品发起请求数据
        GetGoodils({
          isChecked: val == false ? 0 : 1,
          productIds: ids.toString(),
        }).then((res) => {
        
          this.renderData(res);
        });
      },
    },
  },
  created() {
    //购物车数据
    GetCartData().then((res) => {
      console.log(res);
      this.renderData(res);
    });
  },
  beforeRouteEnter(to, from, next) {
    if (to.path == "/cart") {
      let token = localStorage.getItem("token");
      if (token) {
        next();
      } else {
        Vue.prototype.$toast("请先登录");
        setTimeout(() => {
          next("/wode");
        }, 800);
      }
      return;
    }
  },
};
</script>
 
<style lang = "less" scoped>
.van-checkbox-group {
  background-color: #fff;
  padding: 0 10px;
}
/deep/.van-checkbox__label {
  width: 100%;
}
.van-submit-bar {
  bottom: 50px;
}
.van-submit-bar__tip {
  display: flex;
  align-items: center;
}
.van-button {
  margin: 0 5px;
}
.van-card__title {
  margin-top: 20px;
  font-size: 16px;
}
.van-card {
  padding: 0;
  background-color: #fff;
}
/deep/.van-card__header {
  background-color: #fafafa;
}
.van-checkbox {
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
}
.van-card__bottom {
  padding-right: 10px;
  margin-bottom: 10px;
}
.van-row {
  margin: 10px 0;
  text-align: center;
}

.van-stepper {
  text-align: right;
  background-color: #fafafa;
}

.delete-button{
  height: 100%;
}
</style>